import React from 'react'
import ProgramTasksStatusBox from './program-tasks-status-box'
import ProgramTopicsStatusBox from './program-topics-status-box'
import { Divider, Row, Spin } from 'antd'
import { convertContent } from '../../../../../constant/lang-util'
import RefreshTool from '../../../../common/refresh-tool'
import { getProgramStudentAssignmentTagOverview } from '../../../../../actions/program'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

class ProgramAssignmentsTagBody extends React.Component {
  state = {
    isShowTopicStatus: true,
    currentTopic: '',
    userTag: -1,
    spinning: true
  }
  componentDidMount = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    if (user.id > 0) {
      this.props.getProgramStudentAssignmentTagOverview(programId, user.id, `作业Tag总览`, () => {
        this.setState({spinning: false})
      })
    }
  }
  componentWillReceiveProps = nextProps => {
    const {user} = nextProps
    if (this.props.user === user) {
      return false
    }
    const {programId} = this.props.match.params
    this.props.getProgramStudentAssignmentTagOverview(programId, user.id, `作业Tag总览`, () => {
      this.setState({spinning: false})
    })
  }
  refreshProgramStudentAssignmentTagOverview = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.setState({spinning: true})
    this.props.getProgramStudentAssignmentTagOverview(programId, user.id, `作业Tag总览`, () => {
      this.setState({spinning: false})
    },false)
  }

  onChangeTopic = (currentTopic, userTag) => {
    this.setState({currentTopic, userTag, isShowTopicStatus: false})
  }

  filter = (programStudentAssignmentsTag) => {
    const {currentTopic, userTag} = this.state
    const filterByTopic = programStudentAssignmentsTag.filter(item => item['topicTitle'] === currentTopic)
    if (userTag) {
      return filterByTopic.filter(item => item.userTag === userTag)
    }

    return filterByTopic
  }

  showTopicStatus = () => {
    this.setState({isShowTopicStatus: true, currentTopic: ''})
  }

  render () {
    const {isShowTopicStatus, spinning, currentTopic, userTag} = this.state
    const {programStudentAssignmentsTag} = this.props
    return <Spin size="large" spinning={spinning} tip='loading'>
      <Row type='flex' justify='end'>
        <RefreshTool
          refresh={this.refreshProgramStudentAssignmentTagOverview}
          refreshTime={programStudentAssignmentsTag.refreshTime}
        />
      </Row>
      <Divider/>
      {isShowTopicStatus
        ? <ProgramTopicsStatusBox
          programStudentAssignmentsTag={programStudentAssignmentsTag.data}
          onChangeTopic={this.onChangeTopic}
        />
        : <div>
          <a href='javascript:(0)' onClick={this.showTopicStatus}>
            {convertContent('返回')} | {` ${currentTopic}-${userTag.split('|')[0]}`}
          </a>
          <Divider/>
          <ProgramTasksStatusBox
            programStudentAssignmentsTag={this.filter(programStudentAssignmentsTag.data)}
          />
        </div>
      }
    </Spin>

  }
}

const mapStateToProps = ({programStudentAssignmentsTag, user}) => ({
  programStudentAssignmentsTag, user
})
const mapDispatchToProps = dispatch => ({
  getProgramStudentAssignmentTagOverview: (programId, tutorId, type, callback,fromCache) => dispatch(getProgramStudentAssignmentTagOverview(programId, tutorId, type, callback,fromCache)),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProgramAssignmentsTagBody))
